<template>
	<view>
		<view v-for="(row, rowIndex) in grid" :key="rowIndex" style="display: flex;">
			<view v-for="(cell, colIndex) in row" :key="colIndex" class="col-item" :class="[rowIndex % 3 === 0 ? 'border-t':'', colIndex % 3 === 0 ? 'border-l' : '',rowIndex === 8 ? 'border-b' : '',colIndex === 8 ? 'border-r' : '',cell.isFixed ? 'bg-gray' : '',cell.isError ? 'bg-red' : '']">
				<input v-if="!cell.isFixed" type="number" maxlength="1" :value="cell.value || ''" @input="handleInput(rowIndex, colIndex, $event)" @keydown="handleKeydown($event)" class="item-input" :class="{ 'text-primary': cell.value }" />
				<view v-else class="text-gray">{{ cell.value }}</view>
			</view>
		</view>
		
		<view class="oprate">
			<view class="oprate-check" @click="checkSolution">检查答案</view>
			<view class="oprate-new" @click="generateNewGame">重新开始</view>
			<view class="oprate-set" @click="resetGame">重置当前</view>
		</view>
		
		<view v-if="message" class="message" :style="{'color':messageType}">{{message}}</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'

	// 游戏状态
	const grid = ref([]); // 数独网格数据
	const message = ref(''); // 提示信息
	const messageType = ref('#00a63e'); // 提示信息类型

	// 初始化数独
	function initializeGrid() {
		// 创建一个9x9的空网格
		const newGrid = Array(9).fill().map(() =>
			Array(9).fill().map(() => ({
				value: '',
				isFixed: false,
				isError: false
			}))
		);
		return newGrid;
	}

	// 检查数字在指定行是否重复
	function isInRow(grid, row, num) {
		for (let col = 0; col < 9; col++) {
			if (grid[row][col].value == num) {
				return true;
			}
		}
		return false;
	}

	// 检查数字在指定列是否重复
	function isInCol(grid, col, num) {
		for (let row = 0; row < 9; row++) {
			if (grid[row][col].value == num) {
				return true;
			}
		}
		return false;
	}

	// 检查数字在3x3小九宫格中是否重复
	function isInBox(grid, boxStartRow, boxStartCol, num) {
		for (let row = 0; row < 3; row++) {
			for (let col = 0; col < 3; col++) {
				if (grid[row + boxStartRow][col + boxStartCol].value == num) {
					return true;
				}
			}
		}
		return false;
	}

	// 检查数字放置是否合法
	function isSafe(grid, row, col, num) {
		return !isInRow(grid, row, num) &&
			!isInCol(grid, col, num) &&
			!isInBox(grid, row - row % 3, col - col % 3, num);
	}

	// 随机生成数独解决方案（回溯算法）
	function generateSolution(grid) {
		for (let row = 0; row < 9; row++) {
			for (let col = 0; col < 9; col++) {
				// 找到一个空单元格
				if (grid[row][col].value === '') {
					// 尝试1-9的随机排列
					const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9].sort(() => Math.random() - 0.5);

					for (const num of numbers) {
						if (isSafe(grid, row, col, num)) {
							grid[row][col].value = num;

							// 递归填充下一个单元格
							if (generateSolution(grid)) {
								return true;
							}

							// 如果递归失败，回溯
							grid[row][col].value = '';
						}
					}

					// 如果没有数字可以放置，返回失败
					return false;
				}
			}
		}

		// 如果所有单元格都已填充，返回成功
		return true;
	}

	// 从完整解中移除部分数字，形成数独谜题
	function removeNumbers(grid, difficulty = 40) {
		let count = 0;
		// 随机移除指定数量的数字
		while (count < difficulty) {
			const row = Math.floor(Math.random() * 9);
			const col = Math.floor(Math.random() * 9);

			if (grid[row][col].value !== '') {
				grid[row][col].value = '';
				grid[row][col].isFixed = false;
				count++;
			}
		}
	}

	// 生成新游戏
	function generateNewGame() {
		// 重置消息
		message.value = '';

		// 初始化网格
		const newGrid = initializeGrid();

		// 生成完整解
		generateSolution(newGrid);

		// 标记所有单元格为固定
		newGrid.forEach(row => {
			row.forEach(cell => {
				cell.isFixed = true;
				cell.isError = false;
			});
		});

		// 移除部分数字，形成谜题
		removeNumbers(newGrid);

		// 更新网格
		grid.value = newGrid;
	}

	// 处理用户输入
	function handleInput(row, col, event) {
		// 只允许输入1-9的数字
		const value = event.target.value.replace(/[^1-9]/g, '');

		// 更新单元格值
		grid.value[row][col].value = value;
		grid.value[row][col].isError = false;
	}

	// 处理键盘事件，支持方向键移动
	function handleKeydown(event) {
		// 获取当前活跃的输入框
		const activeElement = document.activeElement;
		if (activeElement.tagName !== 'INPUT') return;

		// 获取当前单元格位置
		const row = parseInt(activeElement.closest('div[class*="flex items-center justify-center border"]')
			.parentElement.getAttribute('data-v-for')?.split(',')[1]?.trim() || 0);
		const col = parseInt(activeElement.getAttribute('data-v-for')?.split(',')[1]?.trim() || 0);

		// 方向键控制
		switch (event.key) {
			case 'ArrowUp':
				event.preventDefault();
				if (row > 0) focusInput(row - 1, col);
				break;
			case 'ArrowDown':
				event.preventDefault();
				if (row < 8) focusInput(row + 1, col);
				break;
			case 'ArrowLeft':
				event.preventDefault();
				if (col > 0) focusInput(row, col - 1);
				break;
			case 'ArrowRight':
				event.preventDefault();
				if (col < 8) focusInput(row, col + 1);
				break;
			case 'Backspace':
				// 清空当前单元格
				grid.value[row][col].value = '';
				grid.value[row][col].isError = false;
				break;
		}
	}

	// 聚焦到指定单元格
	function focusInput(row, col) {
		const inputs = document.querySelectorAll('input');
		// 计算索引：row * 9 + col
		const index = row * 9 + col;
		if (inputs[index]) {
			inputs[index].focus();
		}
	}

	// 检查解决方案
	function checkSolution() {
		let hasError = false;
		let isComplete = true;

		// 检查每个单元格
		grid.value.forEach((row, rowIndex) => {
			row.forEach((cell, colIndex) => {
				// 检查空单元格
				if (!cell.value) {
					isComplete = false;
					return;
				}

				// 检查是否有重复
				const isDuplicate =
					isInRow(grid.value, rowIndex, cell.value) ||
					isInCol(grid.value, colIndex, cell.value) ||
					isInBox(grid.value, rowIndex - rowIndex % 3, colIndex - colIndex % 3, cell.value);

				// 如果是重复且不是固定值，则标记为错误
				if (isDuplicate && !cell.isFixed) {
					cell.isError = true;
					hasError = true;
				} else {
					cell.isError = false;
				}
			});
		});

		// 显示结果消息
		if (!isComplete) {
			message.value = '请完成所有单元格';
			messageType.value = '#e17100';
		} else if (hasError) {
			message.value = '有错误，请检查';
			messageType.value = '#e7000b';
		} else {
			message.value = '恭喜你，完成了数独！';
			messageType.value = '#00a63e';
		}
	}

	// 重置游戏（清空用户输入）
	function resetGame() {
		message.value = '';
		grid.value.forEach(row => {
			row.forEach(cell => {
				if (!cell.isFixed) {
					cell.value = '';
					cell.isError = false;
				}
			});
		});
	}

	// 初始化游戏
	generateNewGame();
</script>

<style>
	@import "sudoku.css"
</style>